import React, { Component } from 'react';
import { good_goodinfo } from '../utils/api';
import { StarOutline, StarFill, SendOutline, TruckOutline } from 'antd-mobile-icons'
import { Space, Toast } from 'antd-mobile'
// import store from '../store/index';
import MyNavBar from '../components/MyNavBar'
import { connect } from 'react-redux'
import { request_collect_action, request_cancel_collect_action,request_add_shopcart_action } from '../store/ActionCreator';

class Good extends Component {
    state = {
        goodinfo: {}
    }
    componentDidMount() {
        var { goodid } = this.props.match.params
        good_goodinfo({ goodid }).then((res) => {
            this.setState({ goodinfo: res.data.goodinfo })
            // console.log(res);
        })
        // connect映射不用监听
        // this.unsubscribe = store.subscribe(() => {
        //     console.log('监听到了store的改变');
        //     this.setState({})
        // })
    }
    // componentWillUnmount() {
    //     this.unsubscribe()
    // }
    collect() {
        var res = this.props.collectlist.find((item) => {
            return item.id == this.state.goodinfo.id
        })
        if (res) {
            // store.dispatch(request_cancel_collect_action(this.state.goodinfo))
            this.props.request_cancel_collect(this.state.goodinfo)
            Toast.show({
                icon: 'success',
                content: '已取消收藏',
            })
        } else {
            // store.dispatch(request_collect_action(this.state.goodinfo))
            this.props.request_collect(this.state.goodinfo)
            Toast.show({
                icon: 'success',
                content: '收藏成功',
            })
        }
    }
    addshopcart() {
        // store.dispatch({ type: 'ADDSHOPCART', params: this.state.goodinfo })
        this.props.request_add_shopcart(this.state.goodinfo)
        Toast.show({
            icon: 'success',
            content: '已加入购物车',
        })
    }
    toshopcart() {
        this.props.history.push('/index/cart');
    }
    // handleBack() {
    //     // console.log(this.props);
    //     this.props.history.push('/index/mine')
    // }
    render() {
        return (
            <div className='good'>
                <MyNavBar onBack={() => { this.handleBack() }}>商品详情</MyNavBar>
                <img src={this.state.goodinfo.pic} alt="" />
                <div className="price">活动价：￥{this.state.goodinfo.salesPrice && this.state.goodinfo.salesPrice.value}</div>
                <div className="name">{this.state.goodinfo.name}</div>
                <div className="buy">
                    <Space onClick={() => { this.collect() }} wrap style={{ fontSize: 24 }}>
                        {
                            this.props.collectlist.find((item) => {
                                return item.id == this.state.goodinfo.id
                            }) ? <StarFill color='var(--adm-color-danger)' /> : <StarOutline />
                        }
                        <p>收藏</p>
                    </Space>
                    <Space wrap style={{ fontSize: 24 }}>
                        <SendOutline />
                        <p>分享</p>
                    </Space>
                    <Space onClick={() => { this.toshopcart() }} wrap style={{ fontSize: 24 }}>
                        <TruckOutline />
                        <p>购物车</p>
                    </Space>
                    <div className="btn">
                        <button className='btnleft' onClick={() => { this.addshopcart() }}>加入购物车</button>
                        <button className='btnright'>立即购买</button>
                    </div>
                </div>
            </div>
        );
    }
}

export default connect(
    (state) => {
        return {
            collectlist: state.collectlist,
            shopcartlist: state.shopcartlist
        }
    },
    (dispatch) => {
        return {
            request_collect(params) {
                dispatch(request_collect_action(params))
            },
            request_cancel_collect(params) {
                dispatch(request_cancel_collect_action(params))
            },
            request_add_shopcart(params) {
                dispatch(request_add_shopcart_action(params))
            }
        }
    }
)(Good);